@import "../../scss/plugin";

.navbar-container{
  z-index: $z-navbar;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.navbar{
  padding: 0 5px 0 0;
  background-color: $bg-main;
  display: flex;
  justify-content: space-between;
  position: relative;
  .waterfall-count{
    width: 50px;
    font-family: "JetBrainsMonoDiary", sans-serif;
    text-align: center;
    padding: 0 5px;
    font-size: $fz-label;
    height: $height-navbar;
    line-height: $height-navbar;
    color: $text-menu-second;
  }

  .brand{
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    cursor: pointer;
    margin: 0 auto;
    height: $height-navbar;
    width: 80px;
    img{
      padding: 3px;
      margin: 0 auto;
      display: block;
      height: $height-navbar;
    }
  }

  .nav-btn-wrapper{
    display: flex;

  }

  .nav-part-left{
    display: flex;
    justify-content: flex-start;

  }

  .nav-part-right{
    display: flex;
    justify-content: flex-end;
  }

    .btn-text-group{
    display: flex;
    flex-flow: row nowrap;
    height: $height-navbar;
    align-items: center;
  }
  .btn-text{
    margin-right: 10px;
    font-size: $fz-small;
    border: 1px solid transparent;
    padding: 4px 8px;
    color: white;
    @extend .btn-like;
    @include border-radius($radius-mobile);
    &.active{
      border-color: transparentize(white, 0.7);
      &:hover{
        background-color: transparentize(white, 0.85);
      }
    }
    &:hover{
      background-color: transparentize(white, 0.85);
    }
    &.hole{
      background-color: transparentize($color-main, 0.9);
    }
  }
}

@media (prefers-color-scheme: dark) {
  // NAVBAR
  .navbar{
    background-color: $dark-bg-nav;
    .btn-text{
      color: $dark-text-title;
    }
  }
  .menu-panel{
    background-color: darken($dark-bg, 3%);
  }

  .menu-list-group-item{
    &:after{
      background-color: $dark-menu-border;
    }
  }

}

